<script setup lang="ts">
import { ColumnOptions, DataGridColumn, RowNumberOptions } from '../../components/data-grid/src/data-grid.props';
import { data } from './demo-data';

const columns: DataGridColumn[] = [
    { field: 'id', title: '标识', width: 60, resizable: true, dataType: 'string', readonly: true },
    { field: 'avatar', title: '头像', width: 100, resizable: true, dataType: 'string', readonly: true },
    { field: 'code', title: '编号', width: 80, resizable: true, dataType: 'string' },
    { field: 'name', title: '名称', width: 80, resizable: true, dataType: 'string' },
    { field: 'fullName', title: '全称', width: 80, resizable: true, dataType: 'string' },
    { field: 'status', title: '状况', width: 80, resizable: true, dataType: 'string' },
    { field: 'description', title: '说明', width: 80, resizable: true, dataType: 'text' },
    { field: 'booleanField1', title: '布尔字段一', width: 100, resizable: true, dataType: 'boolean' },
    { field: 'booleanField2', title: '布尔字段二', width: 100, resizable: true, dataType: 'boolean' },
    { field: 'dateField1', title: '日期字段一', width: 100, resizable: true, dataType: 'datetime' },
    { field: 'dateField2', title: '日期字段二', width: 100, resizable: true, dataType: 'datetime' },
    { field: 'datetimeField1', title: '时间字段一', width: 180, resizable: true, dataType: 'datetime' },
    { field: 'datetimeField2', title: '时间字段二', width: 160, resizable: true, dataType: 'datetime' },
    { field: 'enumField1', title: '枚举字段一', width: 120, resizable: true, dataType: 'string' },
    { field: 'enumField2', title: '枚举字段二', width: 100, resizable: true, dataType: 'number' },
    { field: 'numericField1', title: '数字字段一', width: 100, resizable: true, dataType: 'number' },
    { field: 'numericField2', title: '数字字段二', width: 100, resizable: true, dataType: 'number' },
    { field: 'customField1', title: '自定义字段一', width: 120, fixed: 'left', resizable: true, dataType: 'string' },
    { field: 'customField2', title: '自定义字段二', width: 120, fixed: 'left', resizable: true, dataType: 'string' },
    { field: 'customField3', title: '自定义字段三', width: 100, fixed: 'right', resizable: true, dataType: 'string' }
];

const columnOption: ColumnOptions = {
    fitColumns: false,
    fitMode: 'expand',
    groups: [
        {
            field: 'basic-group',
            title: '基本信息',
            group: ['avatar', 'code', { field: 'names', title: '姓名', group: ['name', 'fullName'] }]
        },
        {
            field: 'basic-status',
            title: '基本状况',
            group: ['status', 'description']
        },
        {
            field: 'boolean-fields',
            title: '布尔类型',
            group: ['booleanField1', 'booleanField2']
        },
        {
            field: 'date-fields',
            title: '日期类型',
            group: ['dateField1', 'dateField2']
        },
        {
            field: 'date-time-fields',
            title: '日期时间类型',
            group: ['datetimeField1', 'datetimeField2']
        },
        {
            field: 'enum-fields',
            title: '枚举类型',
            group: ['enumField1', 'enumField2']
        },
        {
            field: 'numeric-fields',
            title: '数字类型',
            group: ['numericField1', 'numericField2']
        },
        {
            field: 'custom-fields',
            title: '自定义字段',
            group: ['customField1', 'customField2', 'customField3']
        }
    ],
    reorderColumn: true,
    resizeColumn: true,
    resizeColumnOnDoubleClick: true
};

const groupOption = {
    enable: false,
    groupFields: ['code'],
    showSummary: false
};

const pagination = {
    enable: true,
    size: 20
};

const rowNumberOption: RowNumberOptions = {
    enable: true,
    width: 32,
    heading: '序号'
};

const selectionOption = {
    multiSelect: true,
    showCheckbox: true
};

const summaryOption = {
    enable: true,
    groupFields: ['numericField1', 'numericField2']
};

const rowOption = {
    wrapContent: false
};
</script>

<template>
    <div class="fv-grid-demo">
        <f-data-grid
            :columns="columns"
            :column-option="columnOption"
            :data="data"
            :editable="true"
            :group="groupOption"
            :merge-cell="false"
            :pagination="pagination"
            :row-number="rowNumberOption"
            :row-option="rowOption"
            :selection="selectionOption"
            :summary="summaryOption"
        ></f-data-grid>
    </div>
</template>
<style>
/* body {
    display: block;
} */
</style>
